<template>
  <div class="galary-content">
    <div class="wrapper">
      <div
        class="imgWrapper"
        v-for="item of imgList[this.index][this.index]"
        :key="item.id">
        <img
          :src="item.imgUrl"
          @click="handlePictureClick(item.id)">
      </div>
    </div>
    <div class="galary"
         v-show="show"
         :length="length">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide
          v-for="item of imgList[this.index][this.index]"
          :key="item.id">
          <div class="galary-desc">
            {{parseInt(item.id) + 1}}/{{length}}
          </div>
          <div class="galary-img">
            <img :src="item.imgUrl">
          </div>
        </swiper-slide>
      </swiper>
      <span
        class="cancelBtn iconfont icon-quxiao"
        @click="handlePictureBackClick">
      </span>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex';

  export default {
    name: "galaryContent",
    computed: mapState(['index']),
    methods: {
      handlePictureClick(index) {
        this.$refs.mySwiper.swiper.slideTo(index, 1000, true);//跳到第几页
        this.length = this.imgList[this.index][this.index].length;
        this.show = true;
      },
      handlePictureBackClick() {
        this.show = false;
      }
    },
    data() {
      return {
        length: 1,
        show: false,
        swiperOption: {
          loop: false,
          initialSlide: 0,
          notNextTick: true
        },
        imgList: [
          {
            0: [
              {
                id: '0',
                imgUrl: 'https://pic5.40017.cn/02/001/c9/be/rBLkCFuPUXiAcueUAAMZ98pP6YI670_520x218_00.jpg',
              },
              {
                id: '1',
                imgUrl: 'https://pic5.40017.cn/04/002/06/84/rBTJUl5TpEyADhLNAAFZaR4yZ24063_520x218_00.jpg',
              },
              {
                id: '2',
                imgUrl: 'https://pic5.40017.cn/04/002/06/84/rBTJUl5TpEyADhLNAAFZaR4yZ24063_520x218_00.jpg',
              }
            ],
          },
          {
            1: [
              {
                id: '0',
                imgUrl: 'https://pic5.40017.cn/02/001/c9/be/rBLkCFuPUXiAcueUAAMZ98pP6YI670_520x218_00.jpg',
              },
              {
                id: '1',
                imgUrl: 'https://pic5.40017.cn/04/002/06/84/rBTJUl5TpEyADhLNAAFZaR4yZ24063_520x218_00.jpg',
              },
              {
                id: '2',
                imgUrl: 'https://pic5.40017.cn/04/002/06/84/rBTJUl5TpEyADhLNAAFZaR4yZ24063_520x218_00.jpg',
              }
            ],
          },
          {
            2: [
              {
                id: '0',
                imgUrl: 'https://pic5.40017.cn/04/002/06/84/rBTJUl5TpEyADhLNAAFZaR4yZ24063_520x218_00.jpg',
              },
              {
                id: '1',
                imgUrl: 'https://pic5.40017.cn/04/002/06/84/rBTJUl5TpEyADhLNAAFZaR4yZ24063_520x218_00.jpg',
              },
              {
                id: '2',
                imgUrl: 'https://pic5.40017.cn/04/002/06/84/rBTJUl5TpEyADhLNAAFZaR4yZ24063_520x218_00.jpg',
              }
            ],
          }
        ]
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .wrapper
    background: #fff

  .imgWrapper
    width: 47%
    background: #aaa
    margin: .12rem
    float: left

  .imgWrapper > img
    width: 100%

  .galary
    position: absolute
    top: -0.86rem
    left: 0
    right: 0
    bottom: 0
    background: #000
    color: #fff

  .galary-desc
    position: absolute
    top: 10%
    left: 48%
    text-align: center
    font-size: .34rem

  .galary-img
    margin-top: 4.5rem

  .galary-img > img
    width: 100%

  .swiper-pagination
    color: #fff
    bottom: 7.5rem

  .cancelBtn
    color: #fff
    z-index: 99999
    font-size: 0.8rem
    position: absolute
    left: 50%
    bottom: 10%
    transform: translate(-50%, -50%)
</style>
